<template>
  <div>
    <div class="centent">
      <p class="title">当前位置 : 首页 > 试用反馈</p>
      <div class="centent-div">
        <div class="text">新版游戏中心试用意见反馈</div>
        <textarea
          class="textareaList"
          placeholder="请输入看法或建议，最多1000字"
          maxlength="1000"
          cols="80"
          rows="5"
          v-model="num"
        ></textarea>
        <div class="textlength">{{ num.length }}/1000</div>
      </div>
      <button class="btn">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MessageBoard",

  data() {
    return {
      num: "",
    };
  },
};
</script>

<style lang="less" scoped>
.centent {
  width: 1160px;
  height: 650px;
  margin: 0 auto;
}
.title {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
  line-height: 20px;
  padding: 20px 0 25px 0;
}
.text {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 32px;
}
.textareaList {
  width: 100%;
  height: 200px;
  border: 1px solid #ced3de;
  border-radius: 6px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.35);
  line-height: 22px;
  margin: 25px 0 30px 0;
  resize: none;
}
.centent-div {
  width: 750px;
  position: relative;
}
.textlength {
  position: absolute;
  right: 20px;
  bottom: 45px;
  font-size: 12px;
  color: #aeb7c9;
  line-height: 20px;
}
.btn {
  width: 200px;
  height: 48px;
  background: #24b8f2;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 24px;
  font-weight: 700;
}
</style>
